.bottom-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 98px;
    display: flex;
    border-top: 1px solid #b6b6b6;
    background-color: rgba(246,246,246,0.95);
    .btn-item{
        flex: 1;
        text-align: center;
        text-decoration: none;
        display: flex;
        font-size: 24px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #929292;
        .tab-icon{
            margin: 0 auto;
            margin-bottom: 4px;
            width: 46px;
            height: 46px;
            background-size: cover;
        }
        &.active{
            color: #27BA8B;
        }
        &.my{
            .tab-icon{
                background-image: url('./img/mine.png')
            }
        }
        &.my.active{
            .tab-icon{
                background-image: url('./img/mineActive.png')
            }
        }
        &.room{
            .tab-icon{
                background-image: url('./img/room.png')
            }
        }
        &.room.active{
            .tab-icon{
                background-image: url('./img/roomActive.png')
            }
        }
        &.home{
            .tab-icon{
                background-image: url('./img/home.png')
            }
        }
        &.home.active{
            .tab-icon{
                background-image: url('./img/homeActive.png')
            }
        }
    }
}